<template>
  <el-button type="primary" @click="addUser">添加用户</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table :data="userPageInfo.list" style="width: 100%" @selection-change="selectId">

    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" />
    <el-table-column property="loginAct" label="账号" />
    <el-table-column property="name" label="姓名" />
    <el-table-column property="phone" label="手机" />
    <el-table-column property="email" label="邮箱" />
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" :icon="Check" circle @click="view(scope.row.id)" />
        <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)" />
        <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next, jumper, total" :total="userPageInfo.total"
    :page-size="userPageInfo.pageSize" @change="toPage" />
</template>

<script setup>
import { ElMessage } from 'element-plus'  // 添加这行导入
import { inject, onMounted, ref } from 'vue'
import { confirmMessage, showMessage } from '../util/message';
import { doPost, doGet, doDelete } from "../http/httpRequest.js"
import { Check, Edit, Delete } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { it } from 'element-plus/es/locales.mjs';

let idArry = [];
let flushPage = inject('flush');

const selectId = (item) => {//item是一个类，不能只看浏览器console输出的东西
  idArry = [];
  for (let index in item) {
    idArry.push(item[index].id)
  }
}

const batchDel = () => {
  if (idArry.length <= 0) {
    showMessage('请选择要删除的数据！', 'error');
  } else {
    confirmMessage("确定要删除这些数据吗？").then(() => {
      let ids = idArry.join(',')
      doDelete('/api/user', { ids: ids }).then(resp => {
        if (resp) {
          if (resp.data.code === 200) {
            showMessage('批量删除成功！', 'success');
            // location.reload();
            flushPage()
          } else {
            showMessage('删除失败，原因' + resp.data.msg, 'error')
          }
        }
      })
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消批量删除'
      })
    })
  }
}


const router = useRouter()
//添加
const addUser = () => {
  router.push('/dashboard/user/input')
}

const userPageInfo = ref([])
//页面渲染后就加载用户列表数据，那么触发vue生命周期函数钩子
onMounted(() => {
  loadUserList(1); //页面渲染时，默认加载第1页数据
})

//加载用户列表的函数
const loadUserList = (current) => {
  doGet('/api/users', {
    current: current //当前是第几页，前面是参数名，后面是参数值
  }).then(resp => {
    if (resp) {
      if (resp.data.code === 200) {
        userPageInfo.value = resp.data.info;
      } else {
        showMessage('数据加载失败', 'error');
      }
    }
  })
}

const toPage = (currentPage, pageSize) => {
  loadUserList(currentPage);
}

const view = (id) => {
  window.location.href = "/dashboard/user/" + id;
}

const edit = (id) => {
  window.location.href = "/dashboard/user/edit/" + id;
}

//删除
const del = (id) => {
  confirmMessage('您确定要删除此数据吗？').then(() => { //点“确定”就执行then函数
    doDelete('/api/user/' + id, {}).then(resp => {
      if (resp) {
        if (resp.data.code === 200) {
          showMessage('删除成功', 'success');
          //页面刷新(js原生代码实现)
          // window.location.reload();
          flushPage()
        } else {
          showMessage('删除失败，原因：' + resp.data.msg, 'error');
        }
      }
    })
  }).catch(() => { //点“取消”按钮就执行catch函数
    ElMessage({
      type: 'info', //提示消息类型：info
      message: '取消删除', //提示的消息文字
    })
  })
}

</script>

<style scoped></style>



<style scoped></style>
